<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';
import { markRaw } from 'vue';

import { getManageInfo } from '#/api';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisits from './analytics-visits.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
// import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';
import { shallowRef } from 'vue';
import { onMounted, ref, } from 'vue';

const overviewItems = ref<AnalysisOverviewItem[]>([
  {
    icon: markRaw(SvgCardIcon),
    title: '用户量',
    totalTitle: '总用户量',
    totalValue: 4,
    value: 4,
  },
  {
    icon: markRaw(SvgCakeIcon),
    title: '访问量',
    totalTitle: '总访问量',
    totalValue: 20,
    value: 10,
  },
  {
    icon: markRaw(SvgDownloadIcon),
    title: '下载量',
    totalTitle: '总下载量',
    totalValue: 5,
    value: 5,
  },
  {
    icon: markRaw(SvgBellIcon),
    title: '使用量',
    totalTitle: '总使用量',
    totalValue: 10,
    value: 10,
  },
])
const chartTabs: TabOption[] = [
  {
    label: '流量趋势',
    value: 'trends',
  },
  {
    label: '月访问量',
    value: 'visits',
  },
];

const getData = async () => {
  const result = await getManageInfo();
  overviewItems.value.forEach((item) => {
    if (item.title === '用户量') {
      item.value = result.userCount.current;
      item.totalValue = result.userCount.total;
    } else if (item.title === '访问量') {
      item.value = result.visitCount.current;
      item.totalValue = result.visitCount.total;
    } else if (item.title === '下载量') {
      item.value = result.downloadCount.current;
      item.totalValue = result.downloadCount.total;
    } else if (item.title === '使用量') {
      item.value = result.usageCount.current;
      item.totalValue = result.usageCount.total;
    }
  });
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs>

    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/2" title="访问数量">
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/2" title="访问来源">
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
      <!-- <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
        <AnalyticsVisitsSales />
      </AnalysisChartCard> -->
    </div>
  </div>
</template>
